<template>
	<view>
		<view class="userAmount">
			<view class="title">
				<!-- 账户余额 -->
				<p>{{ _t18('asset_account', ['ebc']) }}(USDT)</p>
				<svg-load :name="showicon" class="yanjin" @click="handleYanjin"></svg-load>
				<svg-load name="refresh" class="shuaxin" @click="handleShuaxin"></svg-load>
			</view>
			<p class="userInfo fw-num">{{ _numberWithCommas(amount)  }}</p>
			<span style="color: #999"> ≈￥{{_numberWithCommas(amount * 7)}}</span>
		</view>
		<view class="currencyAbout">
			<view v-for="(item, index) in currencyAbout.filter((items) => {
        return items.isShow
      })" :key="index" @click="toRecharge(item.url)">
				<svg-load :name="item.icon" class="currencyIcon"></svg-load>
				<p>{{ item.title }}</p>
			</view>
		</view>
		<view class="userAmount" v-if="props.type == '保本资产'" style="    padding: 0.8rem 0 0 0.4rem;">
			<view>
				<!-- 账户余额 -->
				<p>{{ _t18('asset_account1', ['ebc']) }}</p>
			</view>
		</view>
		<view class="currencyAbout" v-if="props.type == '保本资产'">
			<!--      <div style="width: auto;margin-left: 0.25rem;font-weight: bold">-->
			<!--        盈利：<span :style="{ color: Number(AccountList.keepTotalProfitValue > 0) ? '#138a5d' : Number(AccountList.keepTotalProfitValue < 0) ? '#d62548' : '' }"  >{{AccountList.keepTotalProfitValue}}</span>-->
			<!--      </view>-->
			<!--      style="color: #138a5d" style="color: #d62548"-->
			<view style="margin-left: 5%;width: auto;font-weight: bold">
				纯利：<span
					:style="{ color: Number(AccountList.keepTotalProfitValue > 0) ? '#138a5d' : Number(AccountList.keepTotalProfitValue < 0) ? '#d62548' : '' }">{{AccountList.keepTotalProfitValue}}</span>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		dispatchCustomEvent
	} from '@/utils'
	import {
		_t18,
		_toView
	} from '@/utils/public'
	import {
		DIFF_RECHARGE_COSTORM
	} from '@/config/index'
	import {
		getgetAccount
	} from "@/api/user";
	import {
		onMounted
	} from "vue";

	const props = defineProps({
		data: {
			type: Object
		},
		amount: {
			type: String
		},
		coin: {
			type: String,
			default: 'USDT'
		},
		type: {
			type: String
		},
		showicon: {
			type: String
		}
	})

	const emit = defineEmits(['handleYanjin', 'handleShuaxin'])
	const handleYanjin = () => {
		emit('handleYanjin')
	}
	const handleShuaxin = () => {
		emit('handleShuaxin')
	}

	const currencyAbout = computed(() => {
		let list = []
		// {
		//         icon: 'asset_ganggan',
		//         title: _t18('trade_tab5', ['paxpay']),
		//         url: '/tradeU',
		//         isShow: true
		//       }
		if (props.type == '保本资产') {
			if (['paxpay', 'aams'].includes(__config._APP_ENV)) {
				list = [{
						icon: 'chongbi',
						title: _t18('asset_recharge', ['aams']),
						url: '/recharge',
						isShow: true
					}, //充币 //杠杆
					{
						icon: 'tibi',
						title: _t18('asset_withdraw', ['aams']),
						url: '/withdraw',
						isShow: true
					}, //提币 ,
					{
						icon: 'dui',
						title: _t18('asset_swap'),
						url: '/swap',
						isShow: true
					}, //闪兑
					// {icon: 'asset_licai',title: _t18('financial', ['paxpay']),url: '/financial',isShow: true}, //理财
					{
						icon: 'daikuai',
						title: _t18('asset_loan'),
						url: '/loan',
						isShow: false
					}, //助力贷
					{
						icon: 'huazhuan',
						title: _t18('asset_transfer'),
						url: '/transfer',
						isShow: true
					} //划转
				]
			} else if (['coinmarketcap'].includes(__config._APP_ENV)) {
				list = [{
						icon: 'chongbi',
						title: _t18('asset_recharge', ['coinmarketcap']),
						url: '/recharge',
						isShow: true
					},
					{
						icon: 'tibi',
						title: _t18('asset_withdraw', ['coinmarketcap']),
						url: '/withdraw',
						isShow: true
					},
					{
						icon: 'dui',
						title: _t18('asset_swap'),
						url: '/swap',
						isShow: true
					},
					{
						icon: 'huazhuan',
						title: _t18('asset_transfer'),
						url: '/loan',
						isShow: true
					}
				]
			} else {
				list = [
					// {
					//   icon: 'chongbi',
					//   title: _t18('asset_recharge', ['latcoin']),
					//   url: '/recharge',
					//   isShow: true
					// }, //充币
					// {
					//   icon: 'tibi',
					//   title: _t18('asset_withdraw', ['latcoin']),
					//   url: '/withdraw',
					//   isShow: true
					// }, //提币
					{
						icon: 'dui',
						title: _t18('asset_swap'),
						url: '/swap',
						isShow: false
					}, //闪兑
					{
						icon: 'daikuai',
						title: _t18('asset_loan'),
						url: '/loan',
						isShow: false
					}, //助力贷
					{
						icon: 'huazhuan',
						title: _t18('asset_transfer'),
						url: '/transfer',
						isShow: true
					} //划转
				]
			}
		} else {
			if (['paxpay'].includes(__config._APP_ENV)) {
				list = [{
						icon: 'huazhuan',
						title: _t18('asset_transfer'),
						url: '/transfer',
						isShow: true
					}
					// { icon: 'chongbi', title: '充币', url: '/recharge', isShow: true },
					// { icon: 'tibi', title: '提币', url: '/withdraw', isShow: true },
					// { icon: 'dui', title: '闪兑', url: '/swap', isShow: true },
					// { icon: 'daikuai', title: _t18('asset_loan'), url: '/loan', isShow: true },
				]
			} else {
				list = [{
						icon: 'huazhuan',
						title: _t18('asset_transfer'),
						url: '/transfer',
						isShow: true
					},
					{
						icon: 'chongbi',
						title: '充币',
						url: '/recharge',
						isShow: true
					},
					{
						icon: 'tibi',
						title: '提币',
						url: '/withdraw',
						isShow: true
					},
					{
						icon: 'huazhuan',
						title: '互转',
						url: '/mutualTransfer',
						isShow: true
					},
					{
						icon: 'dui',
						title: '闪兑',
						url: '/swap',
						isShow: false
					},
					{
						icon: 'daikuai',
						title: _t18('asset_loan'),
						url: '/loan',
						isShow: false
					}
				]
			}
		}

		return list
	})
	const AccountList = ref()
	// 获取冻结资产
	const getAccountFreezeList = async () => {
		const res = await getgetAccount()
		if (res.code == '200') {
			AccountList.value = res.data
		}
	}
	onMounted(() => {
		getAccountFreezeList()
	})
	/**
	 * 点击快捷充币
	 */
	const toRecharge = (url) => {
		if (DIFF_RECHARGE_COSTORM.includes(__config._APP_ENV) && url == '/recharge') {
			dispatchCustomEvent('event_serviceChange')
		} else {
			_toView(url)
		}
	}
</script>

<style lang="scss" scoped>
	* {
		font-size: 14px;
		color: var(--ex-default-font-color);
	}

	.title {
		display: flex;
		width: 50%;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25px;
	}

	.userAmount {
		// margin-top: 61px;
		padding: 30px 15px 20px 15px;
		// border-bottom: 1px solid var(--ex-border-color);
		display: flex;
		flex-direction: column;

		div {
			display: flex;
			align-items: center;
			margin-bottom: 25px;

			.yanjin {
				font-size: 14px;
				margin-left: 15px;
				margin-right: 15px;
			}

			.shuaxin {
				font-size: 12px;
			}

			p {
				font-size: 14px;
				color: var(--ex-passive-font-color);
			}
		}

		&>p {
			font-size: 30px;
		}
	}

	.currencyAbout {
		margin-top: 16px;
		margin-left: 10px;
		padding: 0 5px 20px;
		display: flex;
		text-align: center;
		display: flex;
		width: 66%;
		justify-content: space-between;


		&>div {
			width: 25%;
		}

		.currencyIcon {
			font-size: 40px;
			margin-bottom: 10px;
		}
	}
</style>